<template>
  <div class="myde">
    <div class="top">
      <van-image round :src="userInfo.photo" class="my-img" />
      <h2 class="name">
        {{ userInfo.name }}
        <br />
        <van-tag color="#fff" text-color="#3296fa">{{
          userInfo.birthday
        }}</van-tag>
      </h2>
    </div>
    <!-- 操作链接 -->
    <van-row class="my-control-box">
      <van-col class="my-col" span="8"
        ><van-icon class="my-icon my" name="newspaper-o" />我的作品</van-col
      >
      <van-col class="my-col " span="8"
        ><van-icon class="my-icon star" name="star-o" />我的收藏</van-col
      >
      <van-col class="my-col " span="8"
        ><van-icon class="my-icon history" name="tosend" />阅读历史</van-col
      >
    </van-row>
    <!-- 底部区域 -->
    <van-cell title="编辑资料" icon="edit" is-link to="/edit" />
    <van-cell title="小智同学" icon="chat-o" is-link />
    <van-cell title="系统设置" icon="setting-o" is-link />
    <van-cell title="退出登录" @click="logout" icon="warning-o" is-link />
  </div>
</template>

<script>
// import { getuserinfo } from '../../../api/user'
import { removeToken } from '../../../utils/token'
import { mapState } from 'vuex'
export default {
  name: 'user',
  data () {
    return {
      // 用户信息列表
    }
  },
  methods: {
    logout () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '你确定要退出登陆吗？'
        })
        .then(() => {
          removeToken()
          this.$store.commit('setUserInfo', {})
          this.$router.push({ path: '/index' })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  computed: mapState(['userInfo'])
  // created () {
  //   getuserinfo().then(res => {
  //     console.log(res)
  //     this.userinfo = res.data.data
  //   })
  // },
  // 计算属性
  // computed: {
  //   userinfo () {
  //     return this.$store.state.userInfo
  //   }
  // }
}
</script>

<style lang="less">
.myde {
  .top {
    height: 100px;
    background-color: #3296fa;
    display: flex;
    justify-content: start;
    padding-left: 18px;
    align-items: center;
    .my-img {
      width: 60px;
      height: 60px;
      margin-right: 5px;
    }
    .name {
      color: #fff;
      font-size: 15px;
      font-weight: normal;
    }
  }
  .my-col {
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
    .my-icon {
      display: block;
      font-size: 28px;
      margin-bottom: 2px;
      &.my {
        color: #80aaff;
      }
      &.star {
        color: red;
      }
      &.history {
        color: orange;
      }
    }
  }
}
</style>
